<template>
  <div>
    <el-row>
      <el-col :span="4">
       <div style="width:60%;float:left;height:65px;text-align:center;line-height:65px;font-weight:bold;border-radius: 0 0 0px 30px;background: #9575cd;color:#fff;font-size: 18px;">
         {{ statisticsNum.count0 }}人
       </div>
        <div style="width:39%;float:left;height:65px;text-align:center;line-height:65px;font-weight:bold;border-radius: 0 33px 0px 0px;background: #673AB7;color: #fff;">
          简历初筛
        </div>
      </el-col>
      <el-col :span="4">
        <div style="width:60%;float:left;height:65px;text-align:center;line-height:65px;font-weight:bold;border-radius: 0 0 0px 30px;background: #81D4FA;color:#fff;font-size: 18px;">
          {{ statisticsNum.count1 }}人
        </div>
        <div style="width:39%;float:left;height:65px;text-align:center;line-height:65px;font-weight:bold;border-radius: 0 33px 0px 0px;background: #2196F3;color: #fff;">
          面试中
        </div>
      </el-col>
      <el-col :span="4">
        <div style="width:60%;float:left;height:65px;text-align:center;line-height:65px;font-weight:bold;border-radius: 0 0 0px 30px;background: #FFCC80;color:#fff;font-size: 18px;">
          {{ statisticsNum.count4 }}人
        </div>
        <div style="width:39%;float:left;height:65px;text-align:center;line-height:65px;font-weight:bold;border-radius: 0 33px 0px 0px;background: #FF9800;color: #fff;">
          被淘汰
        </div>
      </el-col>
      <el-col :span="4">
        <div style="width:60%;float:left;height:65px;text-align:center;line-height:65px;font-weight:bold;border-radius: 0 0 0px 30px;background: #8BC34A;color:#fff;font-size: 18px;">
          {{ statisticsNum.count2 }}人
        </div>
        <div style="width:39%;float:left;height:65px;text-align:center;line-height:65px;font-weight:bold;border-radius: 0 33px 0px 0px;background: #4CAF50;color: #fff;">
          待入职
        </div>
      </el-col>
      <el-col :span="4">
        <div style="width:60%;float:left;height:65px;text-align:center;line-height:65px;font-weight:bold;border-radius: 0 0 0px 30px;background: #80DEEA;color:#fff;font-size: 18px;">
          {{ statisticsNum2.count1 }}人
        </div>
        <div style="width:39%;float:left;height:65px;text-align:center;line-height:65px;font-weight:bold;border-radius: 0 33px 0px 0px;background: #00BCD4;color: #fff;">
          已入职
        </div>
      </el-col>
      <el-col :span="4">
        <div style="width:60%;float:left;height:65px;text-align:center;line-height:65px;font-weight:bold;border-radius: 0 0 0px 30px;background: #cddc39;color:#fff;font-size: 18px;">
          {{ statisticsNum2.count2 }}人
        </div>
        <div style="width:39%;float:left;height:65px;text-align:center;line-height:65px;font-weight:bold;border-radius: 0 33px 0px 0px;background: #afb42b;color: #fff;">
          放弃入职
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" style="padding-top:0px;">
        <h3 >日常事项</h3>
        <el-col :span="6">
          <div style="width:85%;float:left;height:75px;text-align:center;line-height:70px;font-weight:bold;border-radius:35px;background: #FF9800;color:#fff;font-size: 18px;">
            <img src="../assets/images/srtx.png" height="60px" width="50px"/>
          </div>
          <div style="width:85%;text-align:center;font-weight:bold;color:#FF9800;">
            7人
          </div>
          <div style="width:85%;text-align:center;font-weight:bold;color:#FF9800;">
            本月寿星
          </div>
        </el-col>
        <el-col :span="6">
          <div style="width:85%;float:left;height:75px;text-align:center;line-height:70px;font-weight:bold;border-radius:35px;background: #03A9F4;color:#fff;font-size: 18px;">
            <img src="../assets/images/hetong.png" height="60px" width="60px"/>
          </div>
          <div style="width:85%;text-align:center;font-weight:bold;color:#03A9F4;">
            2人
          </div>
          <div style="width:85%;text-align:center;font-weight:bold;color:#03A9F4;">
            合同续订
          </div>
        </el-col>
        <el-col :span="6">
          <div style="width:85%;float:left;height:75px;text-align:center;line-height:70px;font-weight:bold;border-radius:35px;background: #8BC34A;color:#fff;font-size: 18px;">
            <img src="../assets/images/zhuangzheng.png" height="60px" width="65px"/>
          </div>
          <div style="width:85%;text-align:center;font-weight:bold;color:#8BC34A;">
            7人
          </div>
          <div style="width:85%;text-align:center;font-weight:bold;color:#8BC34A;">
            办理转正
          </div>
        </el-col>
        <el-col :span="6">
          <div style="width:85%;float:left;height:75px;text-align:center;line-height:75px;font-weight:bold;border-radius:35px;background: #673AB7;color:#fff;font-size: 18px;">
            <img src="../assets/images/tiuxiu.png" height="60px" width="60px"/>
          </div>
          <div style="width:85%;text-align:center;font-weight:bold;color:#673AB7;">
            5人
          </div>
          <div style="width:85%;text-align:center;font-weight:bold;color:#673AB7;">
            即将退休
          </div>
        </el-col>
        <el-col :span="6">
          <div style="width:85%;float:left;height:80px;text-align:center;line-height:75px;font-weight:bold;border-radius:35px;background: #009688;color:#fff;font-size: 18px;"  @click="jump">
            <img src="../assets/images/jisuanqi.png" height="60px" width="60px" style="margin-top:10%;"/>
          </div>
          <div style="width:85%;text-align:center;font-weight:bold;color:#009688;">
            个税计算器
          </div>
        </el-col>
        <el-col :span="6">
          <div style="width:85%;float:left;height:80px;text-align:center;line-height:75px;font-weight:bold;border-radius:35px;background: #F44336;color:#fff;font-size: 18px;"  @click="yjgzt()">
            <img src="../assets/images/gongzitiao.png" height="60px" width="60px" style="margin-top:5%;"/>
          </div>
          <div style="width:85%;text-align:center;font-weight:bold;color:#F44336;">
            一键工资条
          </div>
        </el-col>
      </el-col>
      <el-col :span="12" style="padding-top:0px;">
        <h3>日历</h3>
        <el-calendar v-model="value">
        </el-calendar>
      </el-col>
    </el-row>

  </div>
 <!-- <section class="chart-container">
    <el-row>
      <el-col :span="4">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                 label-width="68px">
          <el-form-item label="创建人" prop="nickName">
            <el-select v-model="queryParams.nickName" filterable placeholder="请选择">
              <el-option
                v-for="item in users"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="20">
        <div id="targetPie" style=" height:600px;"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div id="resumePie" style=" height:600px;"></div>
      </el-col>
      <el-col :span="12">
        <div id="stationPie" style=" height:600px;"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div id="resumeRatio" style=" height:600px;"></div>
      </el-col>

    </el-row>
    <el-row>
      <el-col :span="24">
        <div id="stationRatio" style=" height:600px;"></div>
      </el-col>
    </el-row>
  </section>-->
</template>
<script>
  import * as echarts from 'echarts'
  import {updateIsFirst, listAuitvo, addAuitvo, updateAuitvo, statisticsNum, updateStatus} from "@/api/system/auitvo"
  import { statisticsNum as statisticsNum2 } from "@/api/system/Management";
  import {
    listStatistics,
    itoStationCountList,
    itoResumeRatioList,
    itoStationRatioList,
    ItoTargetSelectList,
    ItoSelectResumeUsers
  } from '@/api/system/statistics'

  export default {
    data() {
      return {
        resumePie: null,
        stationPie: null,
        resumeRatio: null,
        stationRatio: null,
        targetPie: null,
        resumeRatioList: [],
        stationRatioList: [],
        targetPieList: [],
        queryParams: {},
        showSearch: true,
        users: [],
        value: new Date(),
        statisticsNum: {
          count0: 0,
          count1: 0,
          count2: 0,
          count3: 0,
          count4: 0
        },
        statisticsNum2: {
          count0: 0,
          count1: 0,
          count2: 0
        },
      }
    },
    methods: {
      /** 统计数量-已入职 */
      statistics2() {
        statisticsNum2().then(response => {
          if (response.data !== undefined) {
            this.statisticsNum2 = response.data;
          }
        });
      },
      /** 统计数量-招聘 */
      statistics() {
        statisticsNum().then(response => {
          if (response.data !== undefined) {
            this.statisticsNum = response.data;
          }
        });
      },
      /** 外部个税计算器 */
      jump() {
        window.open('http://shui.bkt123.com/', '_blank')
      },
      /** 一键工资条 */
      yjgzt(){
        this.$router.push({path: '/money/salarySheet'})
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.targetPieChart();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      resumePieChart() {
        // this.chartPie = echarts.init(document.getElementById('chartPie'));
        this.resumePie = echarts.init(document.getElementById('resumePie'));
        listStatistics().then(res => {
          this.resumePie.setOption({
            series: [
              {
                // 根据名字对应到相应的系列
                name: '推送数量',
                data: res
              }
            ]
          });
        })
        this.resumePie.setOption({
          title: {
            text: '简历统计',
            subtext: '总数',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: 'bottom'
          },
          label: {
            formatter: '{b}: {@2012} ({d}%)'
          },
          series: [
            {
              type: 'pie',
              data: [],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      },
      stationPieChart() {
        // this.chartPie = echarts.init(document.getElementById('chartPie'));
        this.stationPie = echarts.init(document.getElementById('stationPie'));
        itoStationCountList().then(res => {
          this.stationPie.setOption({
            series: [
              {
                name: '找到岗位数量',
                data: res
              }
            ]
          });
        })
        this.stationPie.setOption({
          title: {
            text: '岗位统计',
            subtext: '总数',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: 'bottom'
          },
          label: {
            formatter: '{b}: {@2012} ({d}%)'
          },
          series: [
            {
              type: 'pie',
              data: [],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      },
      resumeRatioChart() {
        this.resumeRatio = echarts.init(document.getElementById('resumeRatio'));
        itoResumeRatioList().then(res => {
          this.resumeRatioList = res;
          this.resumeRatio.setOption({

            visualMap: [
              {
                show: false,
                type: 'continuous',
                seriesIndex: 0,
                min: 0,
                max: 400
              }
            ],
            title: [
              {
                left: 'center',
                text: '简历环比统计'
              }
            ],
            tooltip: {
              trigger: 'axis'
            },
            xAxis: [
              {
                data: this.resumeRatioList.map(e => e.createTime)
              }
            ],
            yAxis: [
              {}
            ],
            grid: [
              {
                bottom: '60%'
              }
            ],
            series: [
              {
                type: 'line',
                showSymbol: false,
                data: this.resumeRatioList.map(e => e.value)
              }
            ]
          })
        })
        this.resumeRatio.setOption({
          visualMap: [],
          title: [],
          tooltip: {},
          xAxis: [],
          yAxis: [],
          grid: [],
          series: []
        })
      },
      stationRatioChart() {
        this.stationRatio = echarts.init(document.getElementById('stationRatio'));
        itoStationRatioList().then(res => {
          this.stationRatioList = res;
          this.stationRatio.setOption({
            visualMap: [
              {
                show: false,
                type: 'continuous',
                seriesIndex: 0,
                min: 0,
                max: 400
              }
            ],
            title: [
              {
                left: 'center',
                text: '岗位环比统计'
              }
            ],
            tooltip: {
              trigger: 'axis'
            },
            xAxis: [
              {
                data: this.stationRatioList.map(e => e.createTime)
              }
            ],
            yAxis: [
              {}
            ],
            grid: [
              {
                bottom: '60%'
              }
            ],
            series: [
              {
                type: 'line',
                showSymbol: false,
                data: this.stationRatioList.map(e => e.value)
              }
            ]
          })
        })
        this.stationRatio.setOption({
          visualMap: [],
          title: [],
          tooltip: {},
          xAxis: [],
          yAxis: [],
          grid: [],
          series: []
        })
      },
      targetPieChart() {
        this.targetPie = echarts.init(document.getElementById('targetPie'));
        ItoTargetSelectList(this.queryParams).then(res => {
          this.targetPieList = res;
          console.log(this.targetPieList.map(item => item.mouth + '第' + item.weekly + '周'))
          this.targetPie.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            toolbox: {
              feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
              }
            },
            legend: {
              data: ['目标简历', '实际完成', '简历完成率']
            },
            xAxis: [
              {
                type: 'category',
                data: this.targetPieList.map(item => item.mouth + '第' + item.weekly + '周'),
                axisPointer: {
                  type: 'shadow'
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '目标简历',
                min: 0,
                max: 40,
                interval: 5,
                axisLabel: {
                  formatter: '{value}'
                }
              },
              {
                type: 'value',
                name: '简历完成率',
                min: 0,
                max: 100,
                interval: 25,
                axisLabel: {
                  formatter: '{value} %'
                }
              }
            ],
            series: [
              {
                name: '目标简历',
                type: 'bar',
                tooltip: {
                  valueFormatter: function (value) {
                    return value;
                  }
                },
                data: this.targetPieList.map(item => item.targetCount)
              },
              {
                name: '实际完成',
                type: 'bar',
                tooltip: {
                  valueFormatter: function (value) {
                    return value;
                  }
                },
                data: this.targetPieList.map(item => item.actualCount)
              },
              {
                name: '简历完成率',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                  valueFormatter: function (value) {
                    return value + '%';
                  }
                },
                data: this.targetPieList.map(item => item.actualCount)
              }
            ]
          });
        })
        this.targetPie.setOption(
          {
            tooltip: {},
            toolbox: {},
            legend: {},
            xAxis: [],
            yAxis: [],
            series: []
          }
        )
      }
    },
    created() {
      ItoSelectResumeUsers().then(res => {
        // console.log(res)
        this.users = res
      });
      this.statistics();
      this.statistics2();
    },
    mounted: function () {
      this.resumePieChart()
      this.stationPieChart()
      this.resumeRatioChart()
      this.stationRatioChart()
      this.targetPieChart()
    }
  }
</script>

<style scoped>
  .chart-container {
    width: 100%;
    float: left;
    background-color: rgba(128, 128, 128, 0.1);
  }

  .el-col {
    padding: 30px 20px;
  }
</style>
